<template>
    <el-card>
        <div class="fs-14 bold">销售记录</div>
        <div class="mg-t-20 set-height">
            <el-timeline>
                <el-timeline-item v-for="(i, index) in listData" :key="index" type="primary" :hollow="index === listData.length - 1">
                    <div class="flex">
                        <div class="left w-50 flex-no-shrink">
                            <div class="fs-20 text-center">{{ getDay(i.payDate) }}</div>
                            <div class="fs-12">{{ getYearMonth(i.payDate) }}</div>
                        </div>
                        <div class="right mg-l-20">
                            <div class="flex items-center">
                                <el-image class="img" src="" fit="cover" />
                                <div class="mg-l-5">
                                    <div class="fs-14">{{ i.name }}</div>
                                    <div class="fs-12 fc-lightgrey mg-t-5">{{ i.payDate }}</div>
                                </div>
                            </div>
                            <div class="flex flex-wrap">
                                <div class="flex-item fs-14 mg-t-10 flex">
                                    <div class="fc-lightgrey w-70">销售场景：</div>
                                    <div class="fc-primary">{{ i.salesScenario }}</div>
                                </div>
                                <div class="flex-item fs-14 mg-t-10 flex">
                                    <div class="fc-lightgrey w-70">服务金额：</div>
                                    <div class="fc-primary">{{ i.serviceAmount }}</div>
                                </div>
                                <div class="flex-item fs-14 mg-t-10 flex">
                                    <div class="fc-lightgrey w-70">开户金额：</div>
                                    <div class="fc-primary">{{ i.openAccountMoney }}</div>
                                </div>
                                <div class="flex-item fs-14 mg-t-10 flex">
                                    <div class="fc-lightgrey w-70">付款方式：</div>
                                    <div class="fc-primary">{{ i.payMode }}</div>
                                </div>
                                <div class="flex-item fs-14 mg-t-10 flex">
                                    <div class="fc-lightgrey w-70">总金额：</div>
                                    <div class="fc-primary">{{ i.totalAmount }}</div>
                                </div>
                                <div class="flex-item fs-14 mg-t-10 flex">
                                    <div class="fc-lightgrey w-70">到期时间：</div>
                                    <div class="fc-primary">{{ i.dueDate }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-timeline-item>
            </el-timeline>
            <div class="text-center fc-lightgrey fs-14 mg-t-20">没有更多了</div>
        </div>
    </el-card>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
    detail: {
        type: Array
    }
})

const listData = ref([])

const filterZero = (n) => {
    return n > 9 ? n : '0' + n
}
const getDay = computed(() => {
    return (date) => {
        return filterZero(dayjs(new Date(date)).date())
    }
})
const getYearMonth = computed(() => {
    return (date) => {
        return dayjs(new Date(date)).year() + '-' + filterZero(dayjs(new Date(date)).month() + 1)
    }
})
watch(() => props.detail, (newval) => {
    listData.value = newval || []
}, {
    deep: true
})
</script>
<style lang="scss" scoped>
:deep(.el-timeline) {
    padding: 10px;
}
.img {
    width: 34px;
    height: 34px;
    border-radius: 17px;
}
.flex-item {
    flex-basis: 50%;
}
.w-50 {
    width: 50px;
}
.w-70 {
    width: 70px;
}
.set-height {
    height: calc(100vh - 380px);
    overflow: auto;
}
</style>